<template>
  <div class="refine_system">
    <h2 class="titleblue">系统日志</h2>
    <div class="container">
      <el-input prefix-icon="el-icon-search" placeholder="搜索用户日志"  @clear="search" clearable v-model="action" class="systemsearch">
        <span slot="append"  @click="search">搜索</span>
      </el-input>
      <el-table
        :data="tableData"
        border
        stripe
        class="table">
        <el-table-column
          prop="No"
          label="序号"
          width="60"
          align="center">
          <template slot-scope="scope" >
            <span v-if='scope.$index!=9'>{{(currentPage-1).toString()+parseInt(scope.$index+1)}}</span>
            <span v-else>{{currentPage+'0'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="licenseNo"
          label="执法证号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="role"
          label="用户角色"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="部门"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="操作日期"
          align="center">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作内容"
          align="center">
        </el-table-column>

      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="total,prev, pager, next, jumper"
          :total="totalPage"
          background>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import * as logService from '@/services/LogService'
  export default {
    components: {
      'data-table': DataTable,
    },
    data: function () {
      return {
        action:'',
        tableData: [],
        currentPage: 1,
        totalPage:0,
        page:10
      };
    },
    created() {
      this.getData();
    },
    methods: {
      handleSizeChange() {
        this.getData();
      },
      handleCurrentChange() {
        this.getData();
      },
      getData() {
        let searchUrl = '';
        if(this.action){
          searchUrl = 'action=like='+this.action
        }
        logService.logList({size: this.page, page: (this.currentPage-1),query:searchUrl}).then((res)=>{
          this.tableData=res.data;
          this.totalPage=parseInt(res.headers['x-total-count']);
          for(var i of this.tableData){
            i.createTime = i.createTime ? this.$m(i.createTime).format('YYYY-MM-DD HH:mm:ss') : '';
          }
        });
      },
      search() {
        this.currentPage = 1;
        this.getData()
      },
    }
  };
</script>

<style lang="scss">

  /*系统日志*/
  .refine_system{
    width: 100%;
    display: inline-block;

    .container{
      margin-top:20px;
      padding:0px 30px;
      box-sizing: border-box;
    }
    .table{
      margin-top:20px;
      width: 100%;
      display: inline-block;
    }
    .search{
      cursor: pointer;
    }
    .systemselect{
      float: right;
      margin-right:10px;
    }
    .systemselect input{
      width: 122px;
      border-radius: 4px;
      border: solid 1px #dddddd;
    }
    .systemsearch .el-input__suffix {
      margin-right: 10px;
    }
    .systemsearch{
      float: right;
      width:310px;
    }
    .systemsearch input{
      width:230px;
      margin-right:10px;
      border-radius:0px;
    }
    .systemsearch .el-input-group__append {
      border-left: 1px;
      width: 56px;
      background-color: #0062cd;
      border-radius: 2px;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
    }

  }
</style>
